<template>
	<view>
		<view class="page-me">
			<u-navbar :border-bottom="false" :is-back="false" title="我的">
			</u-navbar>

			<view class="me-header flex flex-center">
				<view class="me-header-avatar">
					<u-avatar :src="vuex_user.avatar" size="130"></u-avatar>
				</view>
				<view>
					<view class="flex flex-center">
						<view class="nickName">{{ vuex_user.nickName }}</view>
						<view>
							<view class="deptName">{{ vuex_user.dept.deptName }}</view>
						</view>
					</view>
					<view v-if="vuex_user.roles&&vuex_user.roles.length!==0" class="roleName">
						{{ vuex_user.roles[0].roleName }}
					</view>
				</view>
			</view>
			<view class="u-m-t-20">
				<view class="nav-item flex flex-center" @click="navigateTo('/pages/home/message')">
					<view class="flex-1">消息中心</view>
					<view>
						<u-icon color="#BFBFBF" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="nav-item flex flex-center" @click="navigateTo('/pages/form/create')">
					<view class="flex-1">新建表单</view>
					<view>
						<u-icon color="#BFBFBF" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="nav-item flex flex-center" @click="navigateTo('/pages/me/profile')">
					<view class="flex-1">个人信息</view>
					<view>
						<u-icon color="#BFBFBF" name="arrow-right"></u-icon>
					</view>
				</view>
				<bindwx></bindwx>
				<view class="nav-item flex flex-center" @click="navigateTo('/pages/me/updatePwd')">
					<view class="flex-1">修改密码</view>
					<view>
						<u-icon color="#BFBFBF" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="nav-item flex flex-center" @click="logout">
					<view class="flex-1">退出登录</view>
					<view>
						<u-icon color="#BFBFBF" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-tabbar :list="vuex_tabbar" ></u-tabbar>
	</view>
</template>
<script>
import bindwx from './bindwx.vue'

export default {
	data() {
		return {}
	},
	components: {bindwx},
	onLoad() {
		this.$u.api.getUserInfo().then(res => {
			uni.$u.vuex('vuex_user', res.user);
		})
	},
	methods: {
		navigateTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		bindWechat() {
			let that = this;
			uni.login({
				"provider": "weixin",
				success: function (event) {
					const {
						code
					} = event
					that.$u.api.bindWechat({
						code: event.code
					}).then(res => {
						that.$u.toast('绑定成功');
						uni.$u.vuex('vuex_openid', res.openid);
					})
				}
			})
		},
		unbindWx() {
			let that = this;
			that.$u.api.unbindWx({}).then(res => {
				that.$u.toast('取消绑定成功')
				uni.$u.vuex('vuex_openid', '');
			})
		},
		logout() {
			uni.$u.vuex('vuex_token', '');
			uni.$u.vuex('vuex_user', null);
			uni.$u.vuex('vuex_openid', '');
			uni.reLaunch({
				url: '/pages/user/login'
			})
		}
	},
	computed: {
		isbindwx() {
			return this.vuex_openid
		}
	}
}
</script>

<style lang="scss" scoped>
.page-me {
	height: 100vh;
	background-color: #fff;
}

.me-header {
	box-shadow: 0 0 36rpx rgba(0, 0, 0, 0.1);
	margin: 54.35rpx;
	border-radius: 18.12rpx;
	padding: 18.12rpx;
	font-size: 25.36rpx;
}

.nickName {
	color: #3D3D3D;
}

.roleName {
	color: #ACACAC;
	margin-top: 10.87rpx;
}

.deptName {
	background-color: #3A3A3A;
	border-radius: 9.06rpx;
	color: #fff;
	padding: 3.62rpx 9.06rpx;
	margin-left: 25.36rpx;
}

.nav-item {
	padding: 0 27.17rpx;
	margin: 12.68rpx 25.36rpx;
	height: 100rpx;
	border-radius: 9.06rpx;
	border: 1px solid rgba(36, 36, 36, 0.05);
	color: #3D3D3D;
}

.btn {
	width: 100%;
	height: 85.14rpx;
	border-radius: 18.12rpx;
	color: #fff;
	justify-content: center;
}

.btn-text {
	margin-left: 14.49rpx;
}

.btn-msg {
	background-color: $u-type-primary;
}

.btn-add {
	background-color: #898989;
}

.btn-wrap {
	padding: 0 80rpx;
	margin-bottom: 54.35rpx;

	> .flex-1 {
		padding: 0 14rpx;
	}
}

.me-header-avatar {
	margin-right: 18.12rpx;
}
</style>
